<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
    <div class="col-xs-12 col-sm-8">
      <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" onBlur="ConvertName()">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">&nbsp;</label>
    <div class="col-xs-12 col-sm-8"> 自定义资料块文字标题 </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Code')}:</label>
    <div class="col-xs-12 col-sm-8">
      <input id="c-code" data-rule="required" class="form-control" name="row[code]" type="text">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">&nbsp;</label>
    <div class="col-xs-12 col-sm-8"> 调用名称，由字母或数字组成，不能与其它资料块重复 </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
    <div class="col-xs-12 col-sm-8">
      <div class="radio" id="status"> {foreach name="statusList" item="vo"}
        <label for="row[status]-{$key}">
          <input id="row[status]-{$key}" onClick="set_value({$key})" name="row[status]" type="radio" value="{$key}" {in name="key" value="0"}checked{/in} />
          {$vo}</label>
        {/foreach} </div>
    </div>
  </div>
  <div class="form-group" id="group-0">
    <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
    <div class="col-xs-12 col-sm-8">
      <textarea id="c-content" class="form-control" rows="5" name="row[content]" cols="50"></textarea>
    </div>
  </div>
  <div class="form-group" id="group-1" style="display: none">
    <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
    <div class="col-xs-12 col-sm-8">
      <textarea id="c-content2" class="form-control editor" rows="5" name="row[content2]" cols="50"></textarea>
    </div>
  </div>
  <div class="form-group row" id="group-2" style="display: none">
    <label class="control-label col-xs-12 col-sm-2">{:__('Attachfiles')}:</label>
    <div class="col-xs-12 col-sm-8">
      <div class="input-group">
        <input id="c-files" class="form-control" size="50" name="row[files]" type="text" value="" style="display: none">
        <div class="input-group-addon no-border no-padding"> <span>
          <button type="button" id="plupload-files" class="btn btn-danger plupload" data-input-id="c-files" data-mimetype="*" data-multiple="true" data-preview-id="p-files"><i class="fa fa-upload"></i> {:__('Upload')}</button>
          </span> <span>
          <button type="button" id="fachoose-files" class="btn btn-primary fachoose" data-input-id="c-files" data-mimetype="*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button>
          </span> </div>
        <span class="msg-box n-right" for="c-files"></span> </div>
      
      <!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
      <ul class="row list-inline plupload-preview" id="p-files" data-template="introtpl" data-name="row[intro]">
      </ul>
      
      <!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
      <textarea name="row[intro]" class="form-control" style="margin-top:5px; display: none"></textarea>
      
      <!--这里自定义图片预览的模板 开始--> 
      <script type="text/html" id="introtpl">
		<li class="col-xs-3">
			<a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
				<img src="<%=fullurl%>" class="img-responsive">
			</a>
			<input type="text" name="row[intro][<%=index%>]" class="form-control" placeholder="图片附加属性" value="<%=value?value:''%>"/>
			<a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
		</li>
	</script> 
      <!--这里自定义图片预览的模板 结束--> 
    </div>
  </div>
 <!--数据列表-->	
	<div class="form-group row" id="group-3" style="display: none">
		<label class="control-label col-xs-12 col-sm-2">{:__('Keylist')}:</label>
		<div class="col-xs-12 col-sm-8">
			<dl class="fieldlist" data-template="basictpl" data-name="row[basic]">
				<dd>
					<ins style="width:15%">{:__('Keyname')}</ins>
					<ins style="width:40%">{:__('Keyvalue')}</ins>
					<ins>{:__('Keyvalueadd')}</ins>
				</dd>
				<dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
				<!--请注意 dd和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
				<textarea name="row[basic]" class="form-control" cols="30" rows="5" style="display: none" ></textarea>
			</dl>
			<script id="basictpl" type="text/html">
				<dd class="form-inline">
					<ins style="width:15%"><input type="text" name="<%=name%>[<%=index%>][name]" style="width:100%" class="form-control" value="<%=row.name%>"  size="10"/></ins>
					<ins style="width:40%"><input type="text" name="<%=name%>[<%=index%>][value]" style="width:100%" class="form-control" value="<%=row.value%>"  size="20"/></ins>
					<ins><input type="text" name="<%=name%>[<%=index%>][attr]" class="form-control" value="<%=row.attr%>" /></ins>
					<!--下面的两个按钮务必保留-->
					<span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
					<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
				</dd>
			</script>
		</div>
	</div>	
 <!---->
  <div class="form-group layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
      <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
      <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
    </div>
  </div>
</form>
<script language="javascript">
var ConvertName = function(){ 
	var chinaName = $('#c-name').val();
	Fast.api.ajax({
   		url:"{:url('myblock/pinyin')}",
   		data:{name:chinaName}
	}, function(data, ret){
		$('#c-code').val(ret.msg);
   		return false;
   		
	}, function(data, ret){
   		alert(ret.msg);
	});
} 
function set_value(slb){
	$('#group-0').hide();
    $('#group-1').hide();
    $('#group-2').hide();
	$('#group-3').hide();
	$('#group-'+slb).show();
}

</script> 
